<template>
	<view>
		<uv-popup ref="popupRef" mode="center" :close-on-click-overlay="false" round="20rpx">
			<view class="popup">
				<view class="popup-title center">选择品种</view>
				<scroll-view scroll-y="true" style="height: 520rpx;">
					<view class="popup-main flex" v-if="select ==1">
						<view class="popup-item flex" v-for="(item,index) in list" :key="item.id" @click="selectClick(item,index)">
							<image src="@/static/icon/select1.png" v-if="current!=index" mode=""></image>
							<image src="@/static/icon/select2.png" v-else mode=""></image>
							<view>{{item.title}}</view>
						</view>
					</view>
					<view class="popup-main flex" v-else>
						<view class="popup-item flex" v-for="(item,index) in list" :key="item.id" @click="multipleClick(item,index)">
							<block v-if="props.multiple">
								<image src="@/static/icon/select1.png" v-if="!props.multiple.includes(item.title)" mode=""></image>
								<image src="@/static/icon/select2.png" v-else mode=""></image>
							</block>
							<block v-else>
								<image src="@/static/icon/select1.png" v-if="!multiple.includes(item.title)" mode=""></image>
								<image src="@/static/icon/select2.png" v-else mode=""></image>
							</block>
							<view>{{item.title}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-btn flex">
					<view class="btn1 flex justify-center" @click="closePopup">取消</view>
					<view class="btn2 flex justify-center" @click="confirm">确定</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	const props = defineProps({
		list: {
			type: Array,
			default: []
		},
		select: {
			type: Number,
			default: 1 //1 单选 2多选
		},
		multiple: {
			type: Array,
			default: []
		},
		current: {
			type: Number,
			default: 0
		}
	});
	import {
		ref,
		onMounted,
	} from 'vue'
	// 弹窗引用
	const popupRef = ref(null);
	const current = ref(null);
	if(props.current) {
		current.value = props.current
	}
	const varietyName = ref("")
	// 关闭弹窗
	const closePopup = () => {
		if (popupRef.value) {
			popupRef.value.close();
		}
	};
	const emit = defineEmits(['confirm'])
	const selectClick = (item,index) => {
		current.value = index;
		varietyName.value = item.title;
	}
	const multiple = ref([])
	const multipleClick = (item,index) => {
		// 优化后的代码
		if (props.multiple) {
				// 检查当前项是否已存在
			const isExist = props.multiple.includes(item.title);
			// 计算新数组（不直接修改原props）
			const newMultiple = isExist 
		    ? props.multiple.filter(e => e !== item.title)
		    : [...props.multiple, item.title];
			emit('confirm', newMultiple);
		}
		else {
			if(multiple.value.indexOf(item.title) == -1) {
				multiple.value.push(item.title)
			}else {
				multiple.value = multiple.value.filter((e) => e !== item.title);
			}
		}
	}
	// 确定
	const confirm = () => {
		popupRef.value.close();
		if(props.select == 2) {
			closePopup()
			// emit('confirm',multiple.value)
		}else {
			emit('confirm',{varietyName:varietyName.value})
		}
	}
	// 打开弹窗
	const openPopup = () => {
		if (popupRef.value) {
			popupRef.value.open();
		}
	};

	// 暴露方法给父组件
	defineExpose({
		open: openPopup,
		close: closePopup
	});
</script>

<style scoped lang="scss">
	.popup {
		width: 600rpx;
		height: 800rpx;
		padding: 54rpx 44rpx 44rpx;
		text-align: center;
		box-sizing: border-box;

		.popup-title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.popup-main {
			flex-wrap: wrap;
			margin: 34rpx 0;

			.popup-item {
				width: 50%;
				font-size: 30rpx;
				margin-bottom: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
			}
		}

		.popup-btn {
			justify-content: space-evenly;
			margin-top: 50rpx;

			view {
				width: 240rpx;
				height: 90rpx;
				border-radius: 50rpx;
				font-size: 30rpx;
				font-weight: bold;
			}

			.btn1 {
				border: 2rpx solid #E1E1E1;
			}

			.btn2 {
				color: #FFFFFF;
				background: linear-gradient(270deg, #39B54A 0%, #89D05F 100%);
			}
		}
	}
</style>